import React, { useState, useRef } from 'react'
import { Input, Space, Button, Image } from 'antd';
import { addBanner } from '../../api/banner'
import { useHistory } from 'react-router-dom'
function Com() {
  const history = useHistory()
  const linkRef = useRef()
  const altRef = useRef()
  const fileRef = useRef()
  const [img, setImg] = useState('')
  return (
    <Space direction = "vertical">
      <Input ref = { linkRef } placeholder = "link"></Input>
      <Input ref = { altRef } placeholder = "alt"></Input>
      <Input ref = { fileRef } type="file" onChange = { () => {
        console.log(fileRef.current.input)
        const reader = new FileReader()
        reader.readAsDataURL(fileRef.current.input.files[0])
        reader.onload = function () {
          setImg(this.result)
        }
      }}></Input>
      <Image src = { img } />
      <Button type="primary" onClick = { () => {
        // console.log(linkRef.current.input.value)
        // console.log({
        //   link: linkRef.current.input.value,
        //   alt: altRef.current.input.value,
        //   img: img
        // })
        addBanner({
          link: linkRef.current.input.value,
          alt: altRef.current.input.value,
          img: img
        }).then(() => {
          history.push('/banner/list')
        })
      }}>添加</Button>
    </Space>
  )
}

export default Com


